* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
     margin:0;
    font-family: Arial, sans-serif;
        background: linear-gradient(to right,#f8fbff,#eef6ff);
}/* ================= BODY ================= */


.page-header{
    text-align:center;
    padding:60px 10% 10px;
}

.page-header h1{
    font-size:36px;
    color:#27ae60;
    margin-bottom:10px;
    font-weight:700;
    position:relative;
    display:inline-block;
}


.page-header p{
    margin-top:10px;
    font-size:16px;
    color:#555;
}

/* ================= CONTAINER ================= */
.container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    gap:40px;
    padding:70px 8%;
}

/* ================= CARD ================= */
.card{
    background:white;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.07);
    transition:0.4s ease;
    position:relative;
    overflow:hidden;
        display:flex;
    flex-direction:column;

}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#0077B6,#00B4D8);
}

.card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* ================= IMAGE ================= */
.card img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:15px;
    margin-bottom:18px;
    transition:0.4s;
}

.card:hover img{
    transform:scale(1.05);
}

/* ================= TITLE ================= */
.card h2{
    font-size:20px;
    color:#023E8A;
    margin-bottom:15px;
    font-weight:600;
}

/* ================= LIST ================= */
.card ul{
    list-style:none;
    max-height:180px;
    overflow-y:auto;
    margin-bottom:20px;
    padding-right:5px;
}

.card ul li{
    font-size:14px;
    padding:6px 0;
    border-bottom:1px solid #f0f0f0;
    color:#555;
}

/* Scrollbar */
.card ul::-webkit-scrollbar{
    width:4px;
}
.card ul::-webkit-scrollbar-thumb{
    background:#00B4D8;
    border-radius:10px;
}

/* ================= PRICE BUTTON ================= */
.booking{
    width:48%;
    padding:12px;
    border:none;
    border-radius:8px;
    
    font-weight:bold;

    cursor:pointer;
    transition:0.3s;
    flex:1;
    

}

.booking:hover{
    transform:scale(1.05);
}

/* ================= WHATSAPP BUTTON ================= */
.packages{
    width:48%;
    padding:12px;
    border:none;
    border-radius:8px;
      background: linear-gradient(90deg, #4CAF50, #2e7d32);
    
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
       
flex:1;

}

.packages:hover{
    background:#1ebe5d;
    transform:scale(1.05);
}

.card{
    gap:10px;
}

.card .booking{
    background:linear-gradient(45deg,#0077B6,#00B4D8);
    color:white;
    margin-right:4%;
}

.card .packages{
    background:linear-gradient(90deg,#4CAF50,#2e7d32);
    color:white;
}

/* Make buttons inline */
.card .booking,
.card .packages{
    display:inline-block;
}

/* Hover */
.card .booking:hover,
.card .packages:hover{
    transform:scale(1.05);
}




/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
    .container{
        grid-template-columns: repeat(3, 1fr);
        padding:60px 6%;
        overflow-x: hidden;
    }
}


@media (max-width:768px){
    .container{
        grid-template-columns: repeat(2, 1fr);
        padding:40px 5%;
        gap:25px;
    }

    .card img{
        height:180px;
    }
}



/* 480px - Mobile */
@media (max-width:480px){
    .container{
        grid-template-columns: 1fr;
        padding:30px 4%;
        gap:20px;
    }

    .card{
        padding:20px;
        overflow-x: hidden;
    }

    .card h2{
        font-size:18px;
    }

    .card ul li{
        font-size:13px;
    }

    .booking,
    .packages{
        font-size:14px;
        padding:10px;
    }
}